<template>
  <div>

	<myheader></myheader>


	<br /><br />

	<Breadcrumb :datas="datas"></Breadcrumb>

	<section class="featured-block text-center">
		<div class="container">

			<Avatar :src='src' :width='150' fit='fill'  >
			</Avatar>

			<input type="file" @change="upload" />

			<br />

			七牛云上传:<input type="file" @change="upload_qiniu" />
			
		</div>
	</section>
	
	
	<myfooter></myfooter>
	
    
  </div>
  
</template>


 
<script>

//组件包含
import myheader from './myheader.vue';
import myfooter from './myfooter.vue';

export default {
  data () {
    return {
	  //面包屑导航
	  datas:[{title:'首页',route:{name:'index'}},{title:'我的主页'}],
	  msg: "这是一个变量",
	  code:'',
	  src:'',
	  uptoken:''
    };
  },
  //定义组件
  components:{
	'myheader':myheader,
	'myfooter':myfooter
  },
  mounted:function(){

  	//获取密钥
   this.get_token();
  
},
  methods:{

  	//上传七牛云
  	upload_qiniu:function(e){

  		//声明文件对象
		let file = e.target.files[0];
		//声明参数类型
		let param = new FormData();
		//添加文件
		param.append('file',file);
		param.append('token',this.uptoken);

		//定制axios请求
		const axios_qiniu = this.axios.create({withCredentials:false});

		axios_qiniu({

			method:'POST',
			url:'http://up-z1.qiniu.com/',
			data:param,
			timeout:30000

		}).then(result =>{

			console.log(result);

		});


  	},
  	//获取令牌方法
  	get_token(){

  		//发送请求
		this.axios.get('http://localhost:8000/uptoken/').then((result) =>{

			console.log(result);
			//动态赋值
			this.uptoken = result.data.uptoken;

		});

  	},
	//上传方法
	upload:function(e){

		//声明文件对象
		let file = e.target.files[0];
		//声明参数类型
		let param = new FormData();
		//添加文件
		param.append('file',file);
		//声明上传文件头部
		let config = {'Content-Type':'multipart/form-data'};

		//发送请求
		this.axios.post('http://localhost:8000/uploadfile/',param,config).then((result) =>{

			console.log(result);
			//动态赋值
			this.src = 'http://localhost:8000/static/upload/'+result.data.filename;

		});


	}
     
  
	}
}


</script>
 
<style>



</style>